<template>
    <div>
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    </div>
</div>
</template>
<script>
import "swiper/css/swiper.css"; 
import Swiper from "swiper"
export default {
    mounted() {
    new Swiper('.swiper-container', {
    autoplay: true,//可选选项，自动滑动
})

    },
}
</script>
<style lang="scss">
     .swiper-container{
       width: 100%;
       height: 500px;
   }
   .swiper-wrapper > div{
        width: 100%;
        height: 500px;
       opacity: 0.5;
   }
   .swiper-wrapper > div:nth-child(1){
       background-color: pink;
   }
     .swiper-wrapper > div:nth-child(2){
       background-color: green;
   }
     .swiper-wrapper > div:nth-child(3){
       background-color: yellow;
   } 
</style>